<template>
  <div class="stars">
    <span v-for="i in 5" :key="i" :class="['star', i <= rating ? 'full' : 'empty']">★</span>
  </div>
</template>

<script setup>
defineProps({
  rating: {
    type: Number,
    required: true,
    default: 0
  }
})
</script>

<style scoped>
.stars {
  display: inline-block;
}
.star {
  font-size: 14px;
  color: #ccc;
}
.star.full {
  color: gold;
}
</style>